<template>
  <div>
    <div class="top-status-bars">
      <!-- 时间显示 -->
      <span class="time" style="float: left">{{ formattedTime }}</span>
    </div>
    <!-- 显示热力图标题和返回按钮 -->
    <van-nav-bar id="sss" title="热力图" left-text="" left-arrow left-icon="home-o" style="margin-top: 20px" @click-left="toFan">
    </van-nav-bar>
    <!-- 地图容器 -->
    <div id="mapContainer"></div>
    <!-- 新增热力图图例容器 -->
    <div id="heatmapLegend" class="heatmap-legend"></div>
    <div class="ccc">
      <div class="aaa">
        <h2>{{this.addersTextInfo}}</h2>
        <p >周边2公里最近5分钟累积数据<br>订单数量<strong>19</strong> 空闲车辆<strong>5</strong></p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
import AMapLoader from "@amap/amap-jsapi-loader";

// 动态加载热力图数据脚本
const script = document.createElement('script');
// script.src = 'https://a.amap.com/jsapi_demos/static/resource/heatmapData.js';
document.head.appendChild(script);

export default {
  // 组件挂载后初始化高德地图及相关功能
  mounted() {
    this.show();
    this.initAMap();
    // 每秒更新一次时间
    this.intervalId = setInterval(() => {
      this.time = new Date();
    }, 1000);
  },

  beforeDestroy() {
    // 清除定时器
    clearInterval(this.intervalId);
  },
  // 组件卸载前销毁地图实例
  unmounted() {
    if (this.map) {
      this.map.destroy();
    }
  },
  computed: {
    formattedTime() {
      return this.time.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'});
    }
  },
  // 组件的数据状态
  data() {
    return {
      map: null, // 地图实例
      time: new Date(), // 初始时间为当前时间
      heatmapData: [], // 热力图数据
      addersTextInfo: '', // 地址信息
      marker: null // 新增标记点实例的引用，方便后续操作
    };
  },
  // 组件的方法
  methods: {
    // 根据坐标获取地址的方法
    getAddressByLngLat(lngLat) {
      return new Promise((resolve, reject) => {
        AMapLoader.load({
          key: this.$key,
          version: "2.0",
          plugins: ["AMap.Geocoder"]
        })
          .then((AMap) => {
            const geocoder = new AMap.Geocoder({});
            geocoder.getAddress(lngLat, (status, result) => {
              if (status === 'complete' && result.regeocode) {
                resolve(result.regeocode.formattedAddress);
              } else {
                reject(new Error('获取地址失败'));
              }
            });
          })
          .catch((e) => {
            reject(e);
          });
      });
    },
    show(){
      axios.post("order/heatmap/show").then(res => {
        this.heatmapData = res.data;
      })
    },
    // 初始化高德地图及相关功能设置
    initAMap() {
      // 配置高德地图安全码
      window._AMapSecurityConfig = {
        securityJsCode: this.$cod,
      };

      // 加载高德地图 JS API 及所需插件
      AMapLoader.load({
        key: this.$key, // 高德地图 API 密钥
        version: "2.0",
        plugins: ["AMap.Scale", "AMap.HeatMap", "AMap.Geolocation", "AMap.Marker"],
      })
        .then((AMap) => {
          // 创建地图实例
          this.map = new AMap.Map("mapContainer", {
            resizeEnable: true,
            // 初始位置为天安门（可根据实际需求调整初始中心位置）
            center: [116.208738, 40.136906],
            // 地图大小（可根据实际需求调整缩放级别等参数）
            zoom: 17,
            showLogo: false, // 设置为false表示不显示地图logo，不过此参数的可用性可能因版本而异
          });

          // 检查浏览器是否支持canvas
          if (!this.isSupportCanvas()) {
            alert('热力图仅对支持canvas的浏览器适用，您所使用的浏览器不能使用热力图功能，请换个浏览器试试~');
            return;
          }

          // 初始化热力图
          this.map.plugin(["AMap.HeatMap"], () => {
            const heatmap = new AMap.HeatMap(this.map, {
              radius: 24, // 给定半径
              opacity: [0, 1],
              visible: true,
              gradient: {
                0.2: '#FF5733', // 橘红色，比原来的红色稍浅一些作为起始的较低热度颜色，更显柔和且有暖调感觉
                0.4: '#FF9933', // 更深一点的橘色，热度稍高时的颜色过渡
                0.6: '#FFCC33', // 浅黄色，热度进一步提升的颜色体现
                0.8: '#FFFF33', // 亮黄色，接近高温区域的颜色表现
                1.0: '#FF0000', // 经典的红色，用于表示最高热度区域
              },
            });

            // 设置数据集：该数据为北京部分“打车”数据（需确保数据格式正确且可正常获取）
            heatmap.setDataSet({
              data: this.heatmapData,
              max: 100,
            });
            console.log(this.heatmapData);

            // 添加热力图图例
            this.createHeatmapLegend();
          });

          // 创建标记点示例，并保存标记点实例的引用
          this.marker = new AMap.Marker({
            position: [116.208738, 40.136906], // 标记点的坐标位置，此处示例用的初始地图中心坐标，可修改
            map: this.map, // 将标记点添加到当前地图实例上
            title: '示例标记点', // 鼠标悬停在标记点上显示的提示文字
          });

          // 为地图添加点击事件监听，获取点击坐标并设置为地图中心，同时更新标记点位置
          this.map.on('click', (e) => {
            const clickLngLat = e.lnglat;
            this.map.setCenter(clickLngLat);
            // 更新标记点的位置为点击的坐标位置
            this.marker.setPosition(clickLngLat);
            console.log('点击坐标：', clickLngLat);
            // 调用根据坐标获取地址的方法
            this.getAddressByLngLat(clickLngLat).then(address => {
              this.addersTextInfo = address;
              console.log('对应地址：', address);
            }).catch(err => {
              console.error('获取地址出错：', err);
            });
          });

          // 调用获取当前位置的方法
          this.getCurrentLocation();
        })
        .catch((e) => {
          console.error('加载高德地图 API 失败:', e);
        });
    },

    // 创建热力图图例的方法
    createHeatmapLegend() {
      const legendContainer = document.getElementById('heatmapLegend');
      const gradient = {
        0.2: '#FF5733',
        0.4: '#FF9933',
        0.6: '#FFCC33',
        0.8: '#FFFF33',
        1.0: '#FF0000'
      };
      const legendItems = [];
      const maxValue = 100; // 这里假设和热力图设置的最大热度值一致

      // 循环构建每个热度区间对应的图例项
      for (const key in gradient) {
        const legendItem = this.createLegendItem(gradient, key, maxValue); // 调用方法创建单个图例项
        legendItems.push(legendItem);
      }

      legendItems.forEach(item => {
        legendContainer.appendChild(item);
      });
    },

// 创建单个图例项的方法，提取出来方便复用和使主逻辑更清晰
    createLegendItem(gradient, key, maxValue) {
      const value = parseFloat(key);
      const color = gradient[key];
      const minValue = Math.floor(maxValue * value);
      // 计算当前热度区间的最大值，通过获取下一个热度区间的key对应的value来计算，如果不存在下一个key则取最大热度值
      const nextKey = Object.keys(gradient)[Object.keys(gradient).indexOf(key) + 1];
      const maxValueNext = nextKey? Math.floor(maxValue * parseFloat(nextKey)) : maxValue;

      const legendItem = document.createElement('div');
      legendItem.className = 'legend-item';

      const colorBox = document.createElement('div');
      colorBox.style.backgroundColor = color;
      colorBox.style.width = '20px';
      colorBox.style.height = '20px';
      colorBox.style.display = 'inline-block';
      colorBox.style.marginRight = '5px';

      const valueRange = document.createElement('span');
      valueRange.textContent = `${minValue}-${maxValueNext}`;

      legendItem.appendChild(colorBox);
      legendItem.appendChild(valueRange);

      return legendItem;
    },

    // 获取当前位置的方法
    getCurrentLocation() {
      // 创建定位实例
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认为：true
        timeout: 10000, // 超过10秒后停止定位，默以为无穷大
        maximumAge: 0, // 定位结果缓存0毫秒，每次都重新定位
        convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标
        showButton: true, // 是否使用定位按钮
        buttonPosition: 'RB', // 定位按钮停靠位置
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量
      });

      // 将定位实例添加到地图上
      this.map.addControl(geolocation);

      // 监听定位成功事件
      AMap.event.addListener(geolocation, 'complete', (result) => {
        // 更新地图中心位置为当前位置
        this.map.setCenter(result.position);
        // 可以在这里根据需求进一步处理定位结果，比如显示当前地址信息等
        this.addersTextInfo = result.formattedAddress;
        console.log('当前位置定位成功：', result);
      });

      // 监听定位失败事件
      AMap.event.addListener(geolocation, 'failures', (error) => {
        console.error('当前位置定位失败：', error);
      });
    },

    // 返回上一页的方法
    toFan() {
      this.$router.back(-1);
    },

    // 判断浏览器是否支持canvas
    isSupportCanvas() {
      const elem = document.createElement('canvas');
      return!!(elem.getContext && elem.getContext('2d'));
    },
  },
};
</script>

<!-- 样式部分 -->
<style scoped>
.top-status-bars {
  position: fixed;
  top: 0;
  width: 100%;
  height: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

#sss {
  top: 10px;
  margin-left: 0;
  margin-right: auto;
  float: left;
  width: 100%;
  height: 40px;
  background-color: #ffffff;
}

.time {
  float: left;
}

#mapContainer {
  width: 100%;
  height: 759px; /* 根据实际需求调整高度 */
}

.heatmap-legend {
  bottom: 113px;
  position: absolute;
  left: 0;
  z-index: 100;
  //background-color: white;
  padding: 10px;
  border-radius: 5px;
  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.legend-item {
  margin-bottom: 5px;
}

.ccc {
  /* float: right; */
  /* margin-left: 40px; */
  //background-color: #2849b1;
  width: 100%;
  height: 113px;

  .aaa {
    float: right;
    width: 90%;
    height: 100px;
    /* background-color: #ca3333; */

    h2 {
      font-size: 20px;
      float: left;
      margin-top: 15px;
      margin-bottom: 15px;
    }

    p {
      clear: both;
      font-size: 12px;

      strong {
        font-size: 20px;
      }
    }
  }
}

/* 隐藏高德地图logo的样式 */
.amap-logo {
  display: none!important;
}

.amap-copyright {
  display: none!important;
}
</style>
